<script>
	import { Paper, Title, Subtitle, Content } from '@sveltail/core';

	export let attrs = {};
	export let title = 'Title';
	export let subtitle = 'Subtitle';
	export let content = 'Content';
</script>

<Paper class="skeleton-card">
	{#if title}
		<Title class="skeleton-card__title">{title}</Title>
	{/if}
	{#if subtitle}
		<Subtitle class="skeleton-card__subtitle">{subtitle}</Subtitle>
	{/if}
	{#if content}
		<Content class="skeleton-card__content">{content}</Content>
	{/if}
	<slot {...attrs} />
</Paper>

<!-- <style>
	:global(.skeleton-card) {
		background-color: #f5f5f5;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}
</style> -->
